// js代码没有写,输入框有效果,是怎么来的.  必填不能为空,是表格的判定==>先查看HTML中表单
// 的自定义属性,看是否有特殊,如果没有的话,在查看css样式.
//  lay-verify="required|username",检查标签属性,发现特殊自定义属性,css样式中没有,应该是外部引入
//查询引入文档,发现是插件的功能,可以限制输入框输入内容的
//表单自定义===可以用来设置输入框内容的
//点击注册账号,显示注册账号盒子

//完成切换到注册框
$("#goto-register").on("click",function()  {
    $("#register").show()
})

//完成切换到登入框
$("#goto-login").on("click",function () {
    $("#register").hide()
})

// 完成注册功能
/*  1.注册框完成submit事件
2.==>注册账号的原理,就是将满足条件的一串数据提交给服务器    
如果这串数据都没有被占有,满足服务器要求,就可以注册成功*/
// console.log($("#register form"));
$("#register form").on("submit",function (e) {
    e.preventDefault()   //阻止默认行为
    let str=$(this).serialize()   //获取表单内容
    axios.post("api/reguser",str).then(({data:res})=>{
        console.log(res);
        // alert(res.message)//这个提示太挫,不符合用户体验==>layer有内置模块修改
        layer.msg(res.message);
       if(res.status===0) {
           //注册成功后,需要完成页面的跳转,跳转到登入页面
           $("#goto-login").click()   //这样触发也可以完成,展示看不出问题
       }
    })

})

//完成登入功能
/* 1.注册submit事件,提交数据给服务器
2.如果注册成功,就跳转到index页面 */
$("#login form").on("submit",function (e) {
    e.preventDefault()
    //请求有必填项====$(""#login form"").serialize()
    // console.log($("#login form").serialize());
    axios.post("/api/login",$("#login form").serialize()).then(({data:res})=>{
        console.log(res);
        layer.msg(res.message);
        if(res.status===0) {
            //登录成功的时候,需要跳转到index页面
            location.href="/index.html"
            //登入成功后的凭证token
            localStorage.setItem("token",res.token)  
        }
    })
})

// 使用layui插件,完成表单验证效果
layui.form.verify({
    username: [ // 用户名
        /^[a-z0-9]{6,10}$/,
        '账号名是6到10位由数字, 小写字母组成'
    ],
    password: [ // 密码
        /^[\S]{6,10}$/,
        '密码是6到10位, 不能有空格'
    ],
    // 注册页-确认密码     需要通过layui插件中的输入框功能,完成确认密码的判定
    repwd: function (value) { // 为什么用函数, 因为不光要获取这个规则对应的标签的值, 还需要用jQ获取另外一个标签的值
        return ($(".pwd").val() !== value) && '两次密码不相同'
    },
  });      